<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <title>薪资查询</title>
  <link rel="stylesheet" href="css/normalize.css">
  <script src="js/flexible.js"></script>
  <link rel="stylesheet" href="css/check.css">
  <script src="js/jquery.js"></script>
  <script src="js/echarts.min.js"></script>
</head>
<body>
  <header>
    <a href="index.html"></a>
    薪资查询
  </header>

  <!-- 参考薪资部分 开始 -->
  <div class="accord">
    <div class="common-hd">
      参考薪资
    </div>
    <div class="common-bd">
      <p>北京&nbsp;地区&nbsp;&nbsp;JAVA&nbsp;岗位&nbsp;&nbsp;&nbsp;1-3年工作经验的参考薪资</p>

      <h4>
        <span>￥</span>1,8821
      </h4>

      <div class="info">
        现有23131个岗位
      </div>
    </div>
  </div>
  <!-- 参考薪资部分 结束 -->

  <!-- 薪资发布部分 开始 -->
  <div class="publish">
    <div class="common-hd">
      薪资发布
    </div>
    <div class="publish-bd">
      <div class="left-pub pie"></div>
      <div class="right-pub">
        <table>
          <tr>
            <td>区间</td>
            <td></td>
            <td>占比</td>
          </tr>

          <tr>
            <td>4.5k-6k</td>
            <td>
              <div class="pro pro1"></div>
            </td>
            <td>1.2%</td>
          </tr>


          <tr>
            <td>4.5k-6k</td>
            <td>
              <div class="pro pro2"></div>
            </td>
            <td>1.2%</td>
          </tr>

          <tr>
            <td>4.5k-6k</td>
            <td>
              <div class="pro pro3"></div>
            </td>
            <td>1.2%</td>
          </tr>

          <tr>
            <td>4.5k-6k</td>
            <td>
              <div class="pro pro4"></div>
            </td>
            <td>1.2%</td>
          </tr>

          <tr>
            <td>4.5k-6k</td>
            <td>
              <div class="pro pro5"></div>
            </td>
            <td>1.2%</td>
          </tr>

          <tr>
            <td>4.5k-6k</td>
            <td>
              <div class="pro pro6"></div>
            </td>
            <td>12%</td>
          </tr>

          <tr>
            <td>40k-60k</td>
            <td>
              <div class="pro pro7"></div>
            </td>
            <td>1.2%</td>
          </tr>

        </table>
      </div>
    </div>
  </div>
  <!-- 薪资发布部分 结束 -->

  <!-- 各地区薪资 -->

  <div class="area">
    <div class="common-hd">
      各地区薪资
    </div>
    <div class="area-bd">
      <table>
        <tr>
          <td>
            <div class="img-ico">
              <img src="icons/1.png" alt="" srcset="">
            </div>
          </td>
          <td>北京</td>
          <td>
            <img src="icons/形状11.png" alt="" srcset="">
          </td>
          <td>￥18981</td>
        </tr>

        <tr>
          <td>
            <div class="img-ico">
              <img src="icons/2.png" alt="" srcset="">
            </div>
          </td>
          <td>上海</td>
          <td>
            <img src="icons/形状11.png" alt="" srcset="">
          </td>
          <td>￥18000</td>
        </tr>

        <tr>
          <td>
            <div class="img-ico">
              <img src="icons/3.png" alt="" srcset="">
            </div>
          </td>
          <td>广州</td>
          <td>
            <img src="icons/形状11.png" alt="" srcset="">
          </td>
          <td>￥15880</td>
        </tr>

        <tr>
          <td>
            <div class="img-ico">
              <img src="icons/4.png" alt="" srcset="">
            </div>
          </td>
          <td>杭州</td>
          <td>
            <img src="icons/形状11.png" alt="" srcset="">
          </td>
          <td>￥14880</td>
        </tr>


        <tr>
          <td>
            <div class="img-ico">
              <img src="icons/5.png" alt="" srcset="">
            </div>
          </td>
          <td>天津</td>
          <td>
            <img src="icons/形状11.png" alt="" srcset="">
          </td>
          <td>￥13880</td>
        </tr>

        <tr>
          <td>
            <div class="img-ico">
              <img src="icons/6.png" alt="" srcset="">
            </div>
          </td>
          <td>太原</td>
          <td>
            <img src="icons/形状11.png" alt="" srcset="">
          </td>
          <td>￥12880</td>
        </tr>

        <tr>
          <td>
            <div class="img-ico">
              <img src="icons/7.png" alt="" srcset="">
            </div>
          </td>
          <td>西安</td>
          <td>
            <img src="icons/形状11.png" alt="" srcset="">
          </td>
          <td>￥10000</td>
        </tr>
      </table>
    </div>
  </div>
  <script>
    (function () {
      var mycahrt = echarts.init(document.querySelector(".pie"))
      var option = {
        color: ['#37a2da','#32c5e9','#9fe6b8','#ffdb5c','#ff9f7f','#fb7293','#e7bcf3','#8378ea'],
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)",
            // 相对位置，放置在容器正中间
            position: ['50%', '5%']
        },
        grid: {
        left: "0%",
        top: "30%",
        containLabel: true
      },
        series : [
            {
                name:'业务警种',
                type:'pie',
                radius : [0, '42%'],
                // 链接图形和文字的线条
                labelLine: {
                  // length 链接图形的线条
                  length: 6,
                  // length2 链接文字的线条
                  length2: 8
                },
                data:[
                    {value:20, name:'国宝'},
                    {value:30, name:'治安'},
                    {value:25, name:'rose3'},
                    {value:25, name:'rose4'},
                    {value:20, name:'rose5'},
                    {value:35, name:'rose6'},
                    {value:30, name:'rose7'},
                    {value:40, name:'rose8'}
                ]
            }
        ]
    };
    //将配置项给实例对象
    mycahrt.setOption(option);
    // 让图表跟随屏幕自动地去自适应
    window.addEventListener("resize",function () {
      mycahrt.resize();
    })
    })();
  </script>
</body>
</html>